<template>
  <div class="bfc">
    <h2>{{ title }}</h2>
    <n-grid :x-gap="30" :y-gap="10" cols="2 900:4">
      <template v-for="item of books" :key="item._id">
        <n-grid-item class="point">
          <n-card @click="$router.push(`/book/${item._id}`)" :title="item.name">
            <template #cover>
              <img :src="`${host}${item.image}`" />
            </template>
            <n-ellipsis :line-clamp="4">
              {{ item.description }}
            </n-ellipsis>
          </n-card>
        </n-grid-item>
      </template>
    </n-grid>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs } from "vue";
import { NButton, NCard, NEllipsis, NGrid, NGridItem } from "naive-ui";

import { useBooks } from "../hooks/UseBooks";

export default defineComponent({
  name: "category-item",
  components: {
    NButton,
    NCard,
    NEllipsis,
    NGrid,
    NGridItem,
  },
  props: {
    categoryId: {
      type: String,
    },
    title: {
      type: String,
    },
  },
  setup(props) {
    const { categoryId } = toRefs(props);
    const { books, getBooks } = useBooks();
    const host = ref(import.meta.env.VITE_SEREVER_HOST as string);

    getBooks(categoryId.value as string);

    return {
      books,
      getBooks,
      host,
    };
  },
});
</script>

<style>
.bfc {
  overflow: hidden;
}

.point {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.point [role="heading"] {
  --title-font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.point > .n-card {
  flex: 1;
}
</style>
